<template>
  <div class="create-task-container">
    <h2>发布任务</h2>
    
    <el-card class="task-form-card">
      <el-form 
        :model="taskForm" 
        :rules="taskRules" 
        ref="taskFormRef" 
        label-width="100px"
        v-loading="loading"
      >
        <el-form-item label="任务标题" prop="title">
          <el-input v-model="taskForm.title" placeholder="请输入任务标题" />
        </el-form-item>
        
        <el-form-item label="任务类型" prop="jobType">
          <el-select v-model="taskForm.jobType" placeholder="请选择任务类型" style="width: 100%">
            <el-option label="技术开发" value="技术开发" />
            <el-option label="市场营销" value="市场营销" />
            <el-option label="设计创意" value="设计创意" />
            <el-option label="文案撰写" value="文案撰写" />
            <el-option label="客户服务" value="客户服务" />
            <el-option label="数据分析" value="数据分析" />
            <el-option label="教育培训" value="教育培训" />
            <el-option label="其他" value="其他" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="工作地点" prop="location">
          <el-input v-model="taskForm.location" placeholder="请输入工作地点" />
        </el-form-item>
        
        <el-form-item label="工作时间" prop="timeRange">
          <el-date-picker
            v-model="taskForm.timeRange"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            :default-time="['09:00:00', '18:00:00']"
            style="width: 100%"
          />
        </el-form-item>
        
        <el-form-item label="报酬(元)" prop="salary">
          <el-input-number v-model="taskForm.salary" :min="0" :precision="2" style="width: 100%" />
        </el-form-item>
        
        <el-form-item label="任务内容" prop="content">
          <el-input
            v-model="taskForm.content"
            type="textarea"
            :rows="6"
            placeholder="请详细描述任务内容、要求等信息"
          />
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="submitForm">发布任务</el-button>
          <el-button @click="resetForm">重置</el-button>
          <el-button @click="goBack">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { createTask } from '@/api/task'

const router = useRouter()
const taskFormRef = ref(null)
const loading = ref(false)

const taskForm = reactive({
  title: '',
  jobType: '技术开发',
  location: '',
  timeRange: [],
  salary: 100,
  content: ''
})

const taskRules = {
  title: [
    { required: true, message: '请输入任务标题', trigger: 'blur' },
    { min: 2, max: 100, message: '长度在 2 到 100 个字符', trigger: 'blur' }
  ],
  jobType: [
    { required: true, message: '请选择任务类型', trigger: 'change' }
  ],
  location: [
    { required: true, message: '请输入工作地点', trigger: 'blur' }
  ],
  timeRange: [
    { required: true, message: '请选择工作时间', trigger: 'change' }
  ],
  salary: [
    { required: true, message: '请输入报酬', trigger: 'blur' }
  ],
  content: [
    { required: true, message: '请输入任务内容', trigger: 'blur' },
    { min: 10, message: '任务内容不能少于10个字符', trigger: 'blur' }
  ]
}

const submitForm = async () => {
  await taskFormRef.value.validate(async (valid) => {
    if (valid) {
      loading.value = true
      try {
        // 首先检查用户是否为企业用户
        const userType = localStorage.getItem('userType')
        if (userType !== 'company') {
          ElMessage.error('只有企业用户才能发布任务')
          setTimeout(() => {
            router.push('/tasks')
          }, 1500)
          return
        }
        
        // 检查token是否存在和有效
        const token = localStorage.getItem('token')
        if (!token) {
          showLoginMessage('未检测到登录令牌，请先登录')
          return
        }
        
        // 简单检查token有效性（前端辅助检查）
        try {
          // 解析JWT token
          const tokenParts = token.split('.')
          if (tokenParts.length !== 3) {
            showLoginMessage('登录令牌格式不正确，请重新登录')
            return
          }
          
          // 检查过期时间
          const base64Url = tokenParts[1]
          const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/')
          const jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
            return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
          }).join(''))
          
          const payload = JSON.parse(jsonPayload)
          const expTime = payload.exp * 1000 // 转换为毫秒
          const now = Date.now()
          
          if (now >= expTime) {
            showLoginMessage('登录状态已过期，请重新登录', true) // 第二个参数为true表示是过期错误
            return
          }
        } catch (e) {
          console.error('解析token出错:', e)
          // 继续执行，让后端处理
        }
        
        // 检查表单数据是否完整
        if (!taskForm.timeRange || taskForm.timeRange.length < 2) {
          ElMessage.error('请选择完整的工作时间范围')
          return
        }
        
        // 构建提交数据
        const data = {
          title: taskForm.title,
          jobType: taskForm.jobType,
          location: taskForm.location,
          startTime: taskForm.timeRange[0],
          endTime: taskForm.timeRange[1],
          salary: taskForm.salary,
          content: taskForm.content
        }
        
        console.log('开始发送任务创建请求...')
        const response = await createTask(data)
        console.log('收到任务创建响应:', response)
        
        // 增强的响应处理
        if (response) {
          console.log('响应类型:', typeof response)
          if (typeof response === 'object') {
            console.log('响应对象结构:', Object.keys(response))
          }
          
          // 检查各种成功响应的格式
          if (
            (response.data !== undefined && response.data !== null) || 
            response.success === true || 
            response.code === 200 || 
            response.code === 0
          ) {
            ElMessage.success('任务发布成功')
            router.push('/tasks')
          } 
          // 处理可能的成功响应但格式不标准的情况
          else if (
            response.message && 
            (response.message.includes('成功') || response.message.includes('已处理'))
          ) {
            ElMessage.success(response.message || '任务可能已成功发布')
            router.push('/tasks')
          }
          // 处理未知格式的响应
          else {
            console.warn('响应格式不符合预期:', response)
            ElMessage({
              message: '服务器响应格式异常，任务可能已发布，请查看任务列表确认',
              type: 'warning',
              duration: 5000,
              showClose: true
            })
            setTimeout(() => {
              router.push('/tasks')
            }, 2000)
          }
        } else {
          console.error('收到空响应或undefined响应')
          // 尝试继续操作，假设请求可能已成功
          ElMessage({
            message: '未收到服务器明确响应，请查看任务列表确认任务是否已创建',
            type: 'warning',
            duration: 5000,
            showClose: true
          })
          setTimeout(() => {
            router.push('/tasks')
          }, 3000)
        }
      } catch (submitError) {
        console.error('提交失败:', submitError)
        let errorObject = submitError
        let errorMsg = '任务提交失败'
        
        // 更完善的错误对象检查
        if (submitError instanceof Error) {
          errorMsg = submitError.message
          console.error('错误消息:', errorMsg)
          console.error('错误名称:', submitError.name)
          console.error('错误堆栈:', submitError.stack)
        }
        
        if (submitError.response) {
          console.error('HTTP响应状态:', submitError.response.status)
          console.error('响应数据类型:', typeof submitError.response.data)
          if (typeof submitError.response.data === 'object') {
            console.error('响应数据结构:', Object.keys(submitError.response.data || {}))
          } else {
            console.error('响应数据:', submitError.response.data)
          }
          
          if (submitError.response.status === 403) {
            ElMessage({
              message: '没有权限发布任务，请确认您是企业用户',
              type: 'error',
              duration: 5000,
              showClose: true
            })
            
            const storedUserType = localStorage.getItem('userType')
            console.warn('本地存储的用户类型:', storedUserType)
            
            if (storedUserType !== 'company') {
              ElMessageBox.confirm(
                '您的账户不是企业用户，无法发布任务。请使用企业账户登录。',
                '权限不足',
                {
                  confirmButtonText: '重新登录',
                  cancelButtonText: '返回',
                  type: 'warning'
                }
              ).then(() => {
                localStorage.removeItem('token')
                localStorage.removeItem('userType')
                localStorage.removeItem('username')
                router.push('/login')
              }).catch(() => {
                router.push('/tasks')
              })
            }
          } else if (submitError.response.status === 401) {
            showLoginMessage('认证失败，登录令牌可能已过期', true)
          } else {
            const errorMessage = submitError.response.data?.error || 
                                submitError.response.data?.message || 
                                submitError.message || 
                                '任务提交失败，请稍后重试'
            ElMessage.error(errorMessage)
          }
        } else if (submitError.request) {
          console.error('请求已发送但未收到响应')
          console.error('请求详情:', submitError.request)
          ElMessage.error('任务提交失败，请检查网络连接')
        } else {
          let errorMsg = submitError.message || '任务提交失败，请检查网络连接'
          
          if (errorMsg.includes('Network Error')) {
            errorMsg = '网络连接错误，请检查您的网络连接并重试'
          } else if (errorMsg.includes('timeout')) {
            errorMsg = '请求超时，服务器可能繁忙，请稍后重试'
          } else if (errorMsg.includes('服务器未返回任何数据')) {
            errorMsg = '未收到服务器响应，但您的任务可能已提交，请检查任务列表'
            setTimeout(() => {
              router.push('/tasks')
            }, 3000)
          }
          
          ElMessage.error(errorMsg)
        }
      } finally {
        loading.value = false
      }
    } else {
      ElMessage.warning('请完成必填项')
      return false
    }
  })
}

/**
 * 显示登录提示并提供操作选项
 */
const showLoginMessage = (message, isExpired = false) => {
  ElMessageBox.confirm(
    message,
    isExpired ? '登录状态已过期' : '需要登录',
    {
      confirmButtonText: '去登录',
      cancelButtonText: '留在当前页',
      type: 'warning'
    }
  ).then(() => {
    // 清除登录信息
    localStorage.removeItem('token')
    localStorage.removeItem('userType')
    localStorage.removeItem('username')
    router.push('/login')
  }).catch(() => {
    // 用户选择留在当前页，不做任何操作
    ElMessage.info('您可以稍后重新尝试或手动刷新页面')
  })
}

const resetForm = () => {
  taskFormRef.value.resetFields()
}

const goBack = () => {
  router.back()
}
</script>

<style scoped>
.create-task-container {
  padding: 20px;
}

.task-form-card {
  margin-top: 20px;
}
</style> 